<template>
  <div id="equityPoints">
    <c-title :hide="false" text="权益探币"> </c-title>
    <div class="top">
      <div class="title">权益探币</div>
      <div class="point">{{usable}}</div>
    </div>
    <div class="contenBox">
      <van-tabs>
        <van-tab title="明细记录"></van-tab>
      </van-tabs>
    </div>
    <div class="list">
      <div class="lis" v-for="(item,index) in list" :key="index">
        <div class="bottom">
          <div class="top_left">{{item.type_name}}</div>
          <div class="top_right">{{item.change_amount}}</div>
        </div>
        <div class="bottom" style="margin-bottom: 0;">
          <div class="time">{{item.created_at}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      list: [],
      usable:0,
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.page = 1;
    this.getData();
  },
  methods: {
    getData() {
      $http
        .get("plugin.equity-points.frontend.controllers.point.index", {
          page: this.page
        }," ")
        .then(response => {
          if (response.result == 1) {
            this.list = response.data.list.data;
            this.isLoadMore = true;
            this.usable = response.data.usable;
            this.total_page = response.data.list.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        $http
          .get("plugin.equity-points.frontend.controllers.point.index", { page: this.page }," ")
          .then(response => {
            if (response.result == 1) {
              let myData = response.data.list.data;
              this.list = this.list.concat(myData); //数组拼接
              this.total_page = response.data.list.last_page;
            } else {
              this.$dialog.alert({
                message: response.msg
              });
            }
          })
          .catch(err => {
            console.error(err);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#equityPoints {
  background: #f7f7f7;
  min-height: 100vh;
}

.contenBox {
  ::v-deep .van-tabs__nav {
    background: #f7f7f7;
  }
}

.list {
  margin: 0.9375rem 0.625rem;

  .lis {
    padding: 0.9063rem 0.6875rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.625rem;

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.625rem;
    }

    .time {
      text-align: left;
      font-size: 0.6875rem;
      font-weight: 400;
      color: #696969;
    }

    .top_right {
      font-size: 0.8125rem;
      font-weight: 400;
      color: #f14e4e;
    }

    .top_left {
      font-size: 0.8125rem;
      font-weight: 400;
      color: #2b2b2b;
    }
  }
}

.top {
  margin: 0.9375rem 1.0938rem;
  background: linear-gradient(-50deg, #fe8b30 0%, #fbce68 100%);
  box-shadow: 0 0.625rem 0.9375rem 0 rgba(251, 166, 98, 0.2);
  border-radius: 0.75rem;
  padding: 0.9063rem;

  .title {
    text-align: left;
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
  }

  .point {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin: 1.3438rem 0;
  }
}
</style>